<!-- 打赏组件 -->

<template>
  <div id="rewardComponent">
    <popup v-model="curStatus" @on-hide="hideMask">
      <slot name='content'>
        <div class="reward-container">
          <img src="static/image/public/closeIcon.png" class="reward-close" alt="关闭" @click='hideMask'>
          <img :src="teacherHead" class="reward-teacher-head" alt="老师头像">
          <p class="reward-teacher-name">{{teacherName}}</p>
          <div class="reward-money-type">
            <p :class="['reward-money-item', chooseNum == index && isActive[index] ? 'reward-money-active' : '']" v-for="(item,index) in moneyList" :key='index'
              @click="chooseReward(index)">￥{{item}}</p>
          </div>
          <div class="reward-submit-btn" @click='submitMoney'>提交</div>
        </div>
       </slot>
    </popup>
  </div>
</template>

<script>
  import { Popup } from 'vux'
  import tool from '@/assets/js/tool'
  export default {
    props:{
      payType:{
        type: Number
      },
      showStatus:{
        type:Boolean,
        default:false
      },
      teacherHead:{
        type:String,
        default:'static/image/orderInfo/master.png'
      },
      teacherName:{
        type:String,
        default:'石原丞'
      },
      orderCode:{
        type:String,
        default:''
      }
    },
    components:{
      Popup
    },
    data:function(){
      return {
        moneyList:[0.01,20,100,200],
        chooseNum:-1,
        isActive:[false,false,false,false],
        curStatus:this.showStatus
      }
    },
    watch:{
      showStatus:function(val){
        this.curStatus = val;
      },
      curStatus:function(val){
        this.$emit('changeStatus',val)
      }
    },
    methods:{
      chooseReward:function(num){
        var oldStatus = this.isActive[num];
        var copyArr = [false,false,false,false];
        copyArr[num] = !oldStatus;

        this.isActive = copyArr;
        this.chooseNum = !oldStatus ? num : -1;
      },
      submitMoney:function(){
        var curPayType
        switch (this.payType) {
          case 1:
            curPayType = 1
            break;
          case 2:
            curPayType = 0
            break;
          default:
            curPayType = 1
            break;
        }
        console.log('打赏调用参数',this.orderCode,curPayType,this.moneyList[this.chooseNum])
        tool.Alipay(this,curPayType,this.moneyList[this.chooseNum])
        var totalConfig = {
          type:'text',
          text:'',
          position:'top'
        }
        if(this.chooseNum < 0){
          totalConfig.text = '您还未选择打赏额度';
        }else{
          totalConfig.text = '打赏成功，感谢您的信任!';
        }        
        this.$vux.toast.show(totalConfig);
        this.hideMask();
      },
      hideMask:function(){
        this.curStatus = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  @themeColor:#FDC065;

  .reward-container{
    background: white;
    overflow: hidden;
    position: relative;
    padding: 0 50px;
    .reward-close{
      position: absolute;
      top: 30px;
      right: 30px;
      width: 30px;
      height: 30px;
    }
    .reward-teacher-head{
      max-width: 150px;
      max-height: 150px;
      border-radius: 50%;
      display: block; 
      margin: 30px auto 10px;      
    }
    .reward-teacher-name{
      text-align: center;
      color: #333;
      font-size: 32px;
    }
    .reward-money-type{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0;
      .reward-money-item{
        width: 150px;
        height: 70px;
        line-height: 70px;
        background: white;
        text-align: center;
        border: 1px solid @themeColor;/*no*/
        font-size: 32px;
        border-radius:5px;
        color: @themeColor;
        &.reward-money-active{
          background:@themeColor;
          color: white;
        }
      }
    }
    .reward-submit-btn{
      margin: 20px 0 40px;;
      height:84px;
      line-height: 84px;
      text-align: center;
      color: white;
      font-size: 36px;
      background:linear-gradient(90deg,rgba(253,196,111,1),rgba(254,172,50,1));
      border-radius:10px;
    }
  }
</style>